<template>
	<view >
		<!-- :name="address"：给组件传入参数 ，
		v-on:parentCourseSearch="parentCourseSearch" 是给子组件绑定方法，子组件可以通过this.$emit("parentCourseSearch"掉这个方法 -->
		<ComponentHeader :name="address" v-on:parentCourseSearch="parentCourseSearch"></ComponentHeader>
		
		<view class="filter-view">
			<view class="draw-cotrol-btn"  style="border-right: 1rpx solid #D3D3D3;"
			@click="showDrawer('showLeft')"> 筛选  
			
			<image src="../../static/filter.png" style="width: 32rpx;height: 32rpx;"></image></view>
			
			<view class="draw-cotrol-btn" @click="showDrawer('showRight')">排序<image src="../../static/filter.png" style="width: 32rpx;height: 32rpx;"></image></view>
			<!-- 筛选 -->
			<view class="drawer-view" >
				<uni-drawer ref="showLeft" mode="left" :width="windowwidth" >
					<view class="line-view" >
						<view class="line-box-view" v-for="type in courseTypes">
							<view class="line-item-lfet-view">
								<view class="line-item-lfet-image-view"><image :src="type.icon" style="width: 80rpx;height: 80rpx;"/></view>
								<view class="line-item-lfet-text-view"><text>{{type.title}}</text></view>
							</view>
							<view class="line-item-right-view" >
								<view @click="typeSelect"  :data-tid="c.id" v-for="(c,index) in type.children" 
								:class="{'type-active':filter.tid==c.id}"  v-if="index < 4">{{c.title}}</view>
								<view>更多></view>
							</view>
						</view>
						<view class="line-box-view">
							<view class="line-item-lfet-view">
								<view class="line-item-lfet-image-view"><image src="../../static/icon2.png" style="width: 80rpx;height: 80rpx;"/></view>
								<view class="line-item-lfet-text-view"><text>价格范围</text></view>
							</view>
							<view class="line-item-right-price-view"  >
								<input @input="onFilterMinPrice" v-model="filter.minPrice" class="uni-input-amount" type="number" placeholder="最小价格" />
								<input @input="onFilterMaxPrice" v-model="filter.maxPrice" class="uni-input-amount" type="number" placeholder="最大价格" />
							</view>
						</view>
					</view>
					<view style="text-align: center;">
						
						<button  plain="true" @click="confirmFilter('showLeft')" type="primary" class="filter-button">确 定</button>
						<button plain="true" @click="clearDrawer('showLeft')" type="warn" class="filter-button">清 除</button>
					</view>
					
				</uni-drawer>
				
			</view>
			
			<!-- 排序 -->
			<view class="drawer-view" >
				<uni-drawer ref="showRight" mode="right" :width="windowwidth" :height="200">
					<view class="line-order-view" >
						<view class="line-item-right-order-view" >
							<view @click="orderSelect"  :data-ordersn="c.sn" v-for="(c,index) in orders" 
							:class="{'type-active':filter.order==c.sn}" >{{c.title}}</view>
						</view>
					</view>
				</uni-drawer>
				
			</view>
		
		
		</view>
		<view style="background-color: #e7e7e7;padding: 20rpx;text-align: center;">共查询到{{postCount}}条记录</view>
		<view class="course-list-view">
			<view class="course-item-view" v-for="c in list">
				<navigator class="course-item-nav" :url="'../detail/detail?id='+c.id" open-type="navigate">
					<view class="course-item-img-view">
						<image :src="c.pic"></image>
					</view>
				</navigator>
					<view class="course-item-title-view" >
						<view class="course-item-name-view">{{c.name}}</view>
						<view class="course-item-bar-view">
							<text>{{c.viewCount}} 浏览 | {{c.saleCount}} 购买</text>			
						</view>
					</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address:"",
				postCount: 0,
				pageSize: 6,
				pageNum: 0,
				pages:1,
				list: [],
				courseTypes:[
					
					{
						id:1,
						title:"java学科",
						icon:"../../static/icon1.png",
						children:[
							{title:"java基础",id:1},
							{title:"Spring",id:2},
							{title:"SpringBoot",id:3},
							{title:"SpringMVC",id:4},
							{title:"java基础",id:5},
							
						]
					},
					{
						id:2,
						title:"Php学科",
						icon:"../../static/icon2.png",
						children:[
							{title:"SpringMVC",id:6},
							{title:"java基础",id:7},
							{title:"SpringBoot",id:8},
							{title:"java基础",id:9},
							{title:"java基础",id:10},
							
						]
					},
					{
						id:3,
						title:"H5学科",
						icon:"../../static/icon1.png",
						children:[
							{title:"H5基础",id:11},
							{title:"CSS",id:12},
							{title:"JavaScript",id:13},
							{title:"jQuery",id:14},
						]
					},
					{
						id:4,
						title:"UI学科",
						icon:"../../static/icon2.png",
						children:[
							{title:"UI基础",id:15},
							{title:"Photoshop",id:16},
							{title:"绘画",id:17},
							{title:"素描",id:18},
						]
					},
				],
				//抽屉
				showRight: false,
				showLeft: false,
				windowwidth:320,
				filter:{
					tid:"",
					order:"",
					minPrice:"",
					maxPrice:""
				},
				orders:[
					{sn:"jg",title:"价格"},
					{sn:"zx",title:"最新"},
				]

			}
		},
		onLoad: function (option){
			this.filter.tid = option.typeid;
			this.pageNum = this.pageNum + 1;
			this.getList();
		},
		created() {
			var _this = this;
			//窗口大小
			uni.getSystemInfo({
				success(res) {
					_this.windowwidth = res.windowWidth;
				}
			})
			//this.getList();
		},
		
		//页面滑动到底部
		onReachBottom() {
			
			//分页到底了
			if(this.pageNum == this.pages){
				uni.showToast({
					title:"到底了",
					icon:"loading",
					duration:500
				})
				return;
			}
			//分页+1
			this.pageNum = this.pageNum+1
			//加载数据
			this.getList();
			
			
		},
		methods: {
			initLoad() {
				this.pageNum = 1
				//加载数据
				this.getList();
			},
			//父组件，搜索功能
			parentCourseSearch(keyword){
				this.keyword = keyword;
				this.pageNum = 0;//查询显示，第一页
				this.getList();
			},
			getList() {
				//页面滚动到底部触发
				uni.showLoading({title:"加载中...",})
				var _this = this;
				console.log(_this.filter.minPrice);
				console.log(_this.filter.maxPrice);
				uni.request({
					url: 'http://127.0.0.1:1060/course/pagelist',
					data:{
						"page":_this.pageNum,
						"rows":_this.pageSize,
						"keyword":_this.keyword,
						"address":_this.address,
						"courseTypeId":_this.filter.tid,
						"orderField":_this.filter.order,
						"minPrice":_this.filter.minPrice,
						"maxPrice":_this.filter.maxPrice
					},
					method: 'POST',
					success: res => {
						//拼接数据
						_this.list = _this.list.concat(res.data.rows);
						//总条数
						_this.postCount = res.data.total;
						//总页数
						_this.pages = _this.postCount % _this.pageSize == 0?_this.postCount / _this.pageSize:_this.postCount / _this.pageSize+1;
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
					complete() {
						//关闭进度条
						setTimeout(function () {
						    uni.hideLoading();
						}, 500);
					}
				});
			},
			//抽屉
			confirmFilter(e){
				this.getList();
				this.$refs[e].close()
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			clearDrawer(e) {
				this.filter.minPrice = "";
				this.filter.maxPrice ="";
				this.filter.tid = "";
				
				this.getList();
				this.$refs[e].close()
			},
			orderSelect(event){
				let  orderSn = event.currentTarget.dataset.ordersn;
				this.filter.order = orderSn;	
				this.getList();
				this.$refs['showRight'].close();
			},
			typeSelect(event){
				let  tid = event.currentTarget.dataset.tid;
				this.filter.tid = tid;
			},
			onFilterMinPrice(event) {
				this.filter.minPrice = event.target.value
			},
			onFilterMaxPrice(event) {
				this.filter.maxPrice = event.target.value
			},
		},
		
		onNavigationBarButtonTap(e) {
			if(this.showLeft){
				this.$refs.showLeft.close()
			}else{
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
		
	}
</script>
<style lang="scss" scoped>
	@import '@/common/uni-nvue.scss';
	.filter-view{
		border: 1rpx solid #D3D3D3;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
	}
	.filter-view .draw-cotrol-btn{
		width: 49%;
		float: left;
		text-align: center;
	}
	
	
	.course-item-nav{
		height: auto;
	}
	
	.course-list-view{
		padding: 10px;
		clear: both;
		padding-bottom: 20rpx;
		background-image: linear-gradient(#ffffff, #ececec,#f6f6f6);
		vertical-align: top;
	}
	.course-item-view{
		width: 46%;
		height: auto;
		display: inline-block;
		margin-top: 20rpx;
		margin-left: 2%;
		background-color: #ffffff;
		border-radius: 10rpx;
		position: relative;
	}
	
	.course-item-img-view{
		height: 100%;
		clear: both;
	}
	.course-item-img-view image{
		width: 100%;
		height: 180rpx;
		border-radius: 10rpx;
	}
	.course-item-title-view{
		height: auto;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.course-item-name-view{
		height: 70rpx;
		color: #333333;
		font-size:28rpx;
		overflow: hidden;
	}
	.course-item-bar-view{
		height: 20%;
		margin-bottom: 10rpx;
		color: #808080;
	}

	.course-item-bar-view text{
		color: #cece00;
		font-size:24rpx;
	}
	
	
	//===================================
	uni-page-body{
		background-color: #FFFFFF !important;
	}
	.header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		border-top-width: 1px;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		background-color: #ffffff;
	}
	
	.input-view {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
		background-color: #f5f5f5;
	}
	
	.uni-drawer-info {
		background-color: #ffffff;
		padding: 15px;
		padding-top: 5px;
		color: #3b4144;
	}
	
	.uni-padding-wrap {
		padding: 0 15px;
		line-height: 1.8;
	}
	
	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: $uni-font-size-base;
		background-color: transparent;
	}
	
	.close {
		padding: 15px;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}
	
	.draw-cotrol-btn {
		flex: 1;
	}
	
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info-content {
		padding: 5px 15px;
	}
	
	//=======================
	
	.line-box-view{
		height: 140rpx;
		border-bottom: 2rpx solid #e6e6e6;
		padding: 20rpx;
	}
	.line-item-lfet-view{
		width: 25%;
		text-align: center;
		float: left;
		border-right: 2rpx solid #D3D3D3;
		height: 140rpx;
	}
	.line-item-lfet-image-view{
		height: 80rpx;
	}
	.line-item-lfet-text-view{
		height: 60rpx;
		line-height: 60rpx;
	}
	.line-item-right-view{
		width: 70%;float: right;
	}
	.line-item-right-view view{
		display: inline-block;
		margin: 0rpx 10rpx;
		overflow-x: scroll;
		border: 1rpx solid #D3D3D3;
		padding: 2rpx 5rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		height: 46rpx;
		line-height: 46rpx;
	}
	.line-item-right-order-view view{
		border: 1rpx solid #D3D3D3;
		font-size: 32rpx;
		height: 46rpx;
		line-height: 46rpx;
		padding: 20rpx;
	}
	
	.line-item-right-price-view{
		height: 100%;
		width: 70%;float: right;
		vertical-align: middle;
	}
	.uni-input-amount{
		width: 150rpx;
		border: 1rpx solid #D3D3D3;
		border-radius: 5rpx;
		float: left;
		margin-top: 40rpx;
		margin-left: 40rpx;
		padding: 5rpx 10rpx;
	}
	.filter-button{
		width: 40%;
		float: left;
		margin-left: 7%;
		margin-top: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}
	
	.filter-course-type-item-button{
		background-color: #b9fabe;
	}
	.type-active{
		background-color: #dce2e2;
	}
	.line-over-view{
		height: 200rpx;border-bottom: 1rpx solid #D3D3D3; text-align: center;
	}
</style>
